<template>
	<div class="title">
		<div class="top-bar"></div>
		<div class="header vux-1px-b">
			<div class="iconfont" @click="handleBack">
				<x-icon type="ios-arrow-back" style="margin-top: .2rem;" size="25"></x-icon>				
			</div>
			<div class="confirm-btn" @click="sbumitTitle">确定</div>
			活动标签
		</div>
		<div class="content">
			<div class="content-item" v-for="item in title">
				<p class="item-title" v-if="item.tag_son">{{item.title}}</p>
				<ul>
					<li class="item-text" v-for="tag in item.tag_son">
						<checker 
							:max="3"
					      	v-model="titles" 
					      	type="checkbox" 
					      	default-item-class="demo1-item" 
					      	selected-item-class="demo1-item-selected"					      	
				      	>
				      		<checker-item :value="tag.id">{{tag.title}}</checker-item>
				      	</checker>
					</li>
				</ul>

			</div>
		</div>
	</div>
</template>

<script>
	import { Checker, CheckerItem, Toast  } from 'vux'
	export default{
		props:{
			title:{
				type:Array,
				default:()=>{
					return []
				}
			}
		},
		data(){
			return{
				titles:[]
			}
		},
		methods:{
			handleBack(){
				this.$emit('close')
			},
			sbumitTitle(){
				if(this.titles.length > 3){					
					return
				}
				this.$emit('close',this.titles)
			}
		},
		watch:{
			titles(){
				if(this.titles.length > 3){
					this.$vux.toast.text('最多选三个', 'top')
				}
			}
		},
		components:{
			Checker,
    		CheckerItem,
    		Toast 
		}
	}
</script>

<style lang="less" scoped>
	@import '~vux/src/styles/1px.less';
	@comColor:#ff1351;
	.demo1-item {
	  border: 1px solid #ececec;
	  padding: 5px 15px;
	  text-overflow:ellipsis;
		overflow:hidden;
		white-space: nowrap;
	}
	.demo1-item-selected {
	  border: 1px solid #ff1351;
	}
	.title /deep/ .vux-checker-item{
		width: 100%;
		padding: 0;
	}
	.title{
		z-index: 99;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		overflow-y: scroll;
		background: #fff;
		.top-bar{
			height: .54rem;
		}
		.header{
			position: relative;
			line-height: .9rem;
			text-align: center;
			color: @comColor;
			.iconfont{
				position: absolute;
				left: 0;
				top: 0;
				.vux-x-icon{
					fill:#ff1351;
				}
			}
			.confirm-btn{
				position: absolute;
				right: .3rem;
				top: 0;
			}
		}
		.content{
			overflow: hidden;
			padding: 0 .3rem;
			.item-title{
				line-height: .6rem;
				font-size: .32rem;
			}
			.item-text{
				margin:.1rem;
				display: inline-block;
				width: 21%;
				line-height: .6rem;
				text-align: center;
				font-size: .24rem;
				
			}
		}
	}
</style>